<template>
    <div>
        <!-- 搜索栏 -->
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户信息">
                    <div class="w-[250px]">
                        <el-input
                            v-model="queryParams.keyword"
                            placeholder="请输入用户编号/昵称/手机"
                            clearable
                            @keyup.enter="resetPaging"
                        />
                    </div>
                </el-form-item>
                <el-form-item label="用户状态">
                    <div class="w-[180px]">
                        <el-select v-model="queryParams.is_disable">
                            <el-option value="" label="全部" />
                            <el-option value="0" label="正常" />
                            <el-option value="1" label="禁用" />
                        </el-select>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPaging">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格栏 -->
        <el-card v-loading="pager.loading" class="!border-none" shadow="never">
            <el-button v-perms="['users:user:create']" type="primary" @click="handleEditor('create')">
                <template #icon>
                    <icon name="el-icon-Plus" />
                </template>
                <span>创建用户</span>
            </el-button>
            <el-table :data="pager.lists" size="large" class="mt-4">
                <el-table-column label="用户信息" prop="user" min-width="150">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-avatar :size="50" :src="row?.avatar" />
                            <div class="ml-2">
                                <p>{{ row?.nickname }}</p>
                                <p class="text-xs text-tx-placeholder">{{ row?.sn }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="分组" prop="group" min-width="120" />
                <el-table-column label="联系电话" prop="mobile" min-width="110" />
                <el-table-column label="积分余额" prop="points" min-width="110" />
                <el-table-column label="余额(总/耗)" prop="email" min-width="180">
                    <template #default="{ row }">
                        <el-tooltip effect="dark" placement="left">
                            <p>MCP数：{{ row?.mcp_num }}/{{ row?.pack_mcp_num }}/{{ row?.usage_mcp_num }}</p>
                            <template #content>
                                <p>固定MCP数：{{ row?.mcp_num }}</p>
                                <p>套餐MCP数：{{ row?.pack_mcp_num }}</p>
                                <p>已用MCP数：{{ row?.usage_mcp_num }}</p>
                            </template>
                        </el-tooltip>
                        <el-tooltip effect="dark" placement="left">
                            <p>智能体：{{ row?.robot_num }}/{{ row?.pack_robot_num }}/{{ row?.usage_robot_num }}</p>
                            <template #content>
                                <p>固定智能体：{{ row?.robot_num }}</p>
                                <p>套餐智能体：{{ row?.pack_robot_num }}</p>
                                <p>已用智能体：{{ row?.usage_robot_num }}</p>
                            </template>
                        </el-tooltip>
                        <el-tooltip effect="dark" placement="left">
                            <p>知识库：{{ row?.know_num }}/{{ row?.pack_know_num }}/{{ row?.usage_know_num }}</p>
                            <template #content>
                                <p>固定知识库：{{ row?.know_num }}</p>
                                <p>套餐知识库：{{ row?.pack_know_num }}</p>
                                <p>已用知识库：{{ row?.usage_know_num }}</p>
                            </template>
                        </el-tooltip>
                        <el-tooltip effect="dark" placement="left">
                            <p>训练组：{{ row?.train_num }}/{{ row?.pack_train_num }}/{{ row?.usage_train_num }}</p>
                            <template #content>
                                <p>固定训练组：{{ row?.train_num }}</p>
                                <p>套餐训练组：{{ row?.pack_train_num }}</p>
                                <p>已用训练组：{{ row?.usage_train_num }}</p>
                            </template>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="订阅会员" prop="member" min-width="100">
                    <template #header>
                        <div class="text-center">订阅会员</div>
                    </template>
                    <template #default="{ row }">
                        <div class="text-center">
                            <p>{{ row?.member_package }}</p>
                            <p class="text-sm text-tx-secondary">
                                {{ row?.member_end_time }}
                            </p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="is_disable" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.is_disable === 0">正常</el-tag>
                        <el-tag v-else type="danger">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="create_time" min-width="175" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['users:user:subscribe']"
                            type="primary"
                            link
                            @click="handleMember(row.id)"
                        >订阅</el-button>

                        <el-button
                            v-perms="['users:user:detail']"
                            type="primary"
                            link
                            @click="handleEditor('detail', row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <paging v-model="pager" @change="queryLists" />
            </div>
        </el-card>

        <!-- 编辑器 -->
        <detail v-if="showDetail" ref="detailRef" @success="queryLists" @close="showDetail = false" />

        <!-- 创建用户 -->
        <create v-if="showCreate" ref="createRef" @success="queryLists" @close="showCreate = false" />

        <!-- 会员信息 -->
        <subscribe v-if="showMember" ref="memberRef" @close="showMember = false" />
    </div>
</template>

<script setup lang="ts">
import { usePaging } from '@/hooks/usePaging'
import userApi from '@/api/users/user'
import Detail from './detail.vue'
import Create from './create.vue'
import Subscribe from './subscribe.vue'

const showMember = ref(false)
const showDetail = ref(false)
const showCreate = ref(false)
const memberRef = shallowRef<InstanceType<typeof Subscribe>>()
const detailRef = shallowRef<InstanceType<typeof Detail>>()
const createRef = shallowRef<InstanceType<typeof Create>>()

// 查询参数
const queryParams = reactive({
    keyword: '',
    is_disable: ''
})

// 分页查询
const { pager, queryLists, resetParams, resetPaging } = usePaging({
    fetchFun: userApi.lists,
    params: queryParams
})

/**
 * 处理编辑
 *
 * @param {string} type
 * @param {any} row
 * @returns {Promise<void>}
 */
const handleEditor = async (type: string, row?: any): Promise<void> => {
    if (type === 'create') {
        showCreate.value = true
        await nextTick()
        createRef.value?.open()
    } else {
        showDetail.value = true
        await nextTick()
        detailRef.value?.open(type, row)
    }
}

/**
 * 订阅会员
 *
 * @param {number} id
 * @returns {Promise<void>}
 */
const handleMember = async (id: number): Promise<void> => {
    showMember.value = true
    await nextTick()
    memberRef.value?.open(id)
}

onMounted(async () => {
    await queryLists()
})
</script>
